<template>
    <el-row>
        <el-col :span="24">
            <!-- 头 -->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="username" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                type="index"
                width="50">
                </el-table-column>
                <el-table-column
                property="name"
                label="姓名"
                width="120">
                </el-table-column>
                <el-table-column
                property="address"
                label="地址">
                </el-table-column>
                <el-table-column
                property="date"
                label="出生日期"
                width="120">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加弹窗 -->

            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="70%"
                :before-close="handleClose">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker
                            v-model="addForm.date"
                            type="date"
                            placeholder="选择日期"
                            style="width:100%"
                            value-format="yyyy-MM-dd"
                            >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="住址">
                        <el-input v-model="addForm.address"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>
<script>
export default {
    created(){
        this.$http.get('/api/member').then((res) => {
            console.log(res);
            if(res.data.code === 1){
                this.tableData = res.data.data;
            }
        })
    },
    data(){
        return {
            dialogVisible:false,
            username:'',
            tableData: [],
            addForm:{
                name:'',
                date:'',
                address:''
            },
            id:''
        }
    },
    watch:{
        dialogVisible(newVal,oldVal){
            if(newVal && !this.id){
                this.addForm = {
                    name:'',
                    date:'',
                    address:''
                }
            }
        }
    },
    methods:{
        // 搜索
        search(){

        },
        //新增
        add(){
            this.addMember();
        },
        addMember(){
            console.log(this.addForm);
            this.$http.post('/api/add',this.addForm).then((res) => {
                if(res.data.code === 1){
                    if(!this.id){
                        this.tableData.unshift(res.data.data);
                    }else{
                        let ind = this.tableData.findIndex(item => item.id === this.addForm.id);
                        this.tableData.splice(ind,1,this.addForm);
                    }
                    this.dialogVisible = false;
                    this.id = '';
                }
            })
        },
        // 编辑
        handleEdit(index,row){
            console.log(index,row);
            this.addForm = row;
            this.id = row.id;
            this.dialogVisible = true;
        },
        //删除
        handleDelete(index,row){
            console.log(index,row);
            this.$http.get('/api/del',{params:{id:row.id}}).then((res) => {
                if(res.data.code === 1){
                    this.tableData.splice(index,1);
                }
            })
        },
        //关闭弹窗的回调
        handleClose(){
            this.$confirm('确认关闭？')
            .then(_ => {
                this.dialogVisible = false;
                done();
            })
            .catch(_ => {});
        },
        handleSelectionChange(val){
            console.log(val)
        }
    }
}
</script>
